const mask = {
  // 计数键值对
  numMap: {},
  /**
     * 初始化计数键值对
     * @param container 容器
     */
  init (container = 'body') {
    if (!(container in this.numMap)) {
      document.querySelector('html,body').style.cssText = 'width:100%; height:100%;'
      this.numMap[container] = 0
    }
  },
  /**
     * 获取css字符串
     * @param css
     * @returns {string}
     */
  getCSSText (css = {}) {
    let string = ''
    for (let [key, value] of Object.entries(css)) {
      string += `${key}:${value};`
    }
    return string
  }
}

export default {
  /**
     * 显示遮罩层
     * @param id
     * @param css
     * @param cssi
     */
  open ({id = 'body', css = {}, cssi = {}}) {
    mask.init(id)
    if (mask.numMap[id]++ === 0) {
      // 遮罩层元素
      let maskElement = document.createElement('div')
      maskElement.style.cssText = `position: fixed;width: 100%;height: 100%;background-color: rgba(0,0,0,0.6);z-index: 9999;display: flex;top: 0;left: 0;${mask.getCSSText(css)}`
      maskElement.setAttribute('class', 'blc-mask')
      // 遮罩层上的图表元素
      let iElement = document.createElement('i')
      iElement.style.cssText = `color: white;display: -webkit-flex;align-items: center;justify-content: center;margin: 0 auto;${mask.getCSSText(cssi)}`
      iElement.setAttribute('class', 'fa fa-spinner fa-spin fa-3x fa-fw')
      // 添加节点
      maskElement.appendChild(iElement)
      // 在页面添加节点
      document.querySelector(id).appendChild(maskElement)
    }
  },
  /**
     * 计数减一
     * @param id
     * @param num
     */
  close ({id = 'body', num = 1}) {
    mask.numMap[id] -= num
    if (mask.numMap[id] <= 0) {
      mask.numMap[id] = 0
      // 获取目标遮罩层元素
      const element = document.querySelector(`${id}>div.blc-mask`)
      // 移除当前遮罩层
      element.parentNode.removeChild(element)
    }
  }

}
